<template>
  <div class="content-container" v-show="groupData.data && groupData.data.length">
    <div class="item-list">
      <div v-for="(item, index) in groupData.data" :key="index" class="con">
        <p :data-index="'tar_'+group + '_'+index" class="anchor"></p>
        <img
          v-lazy="item.images[0] ? item.images[0].url : null"
          :key="item.images[0].url"
          class="bg"
          :class="[{nav_foc: focArr[index]}]"
          alt
        >
        <!--<img :src="item.images[0] ? item.images[0].url : null" class="bg" :class="[{nav_foc: focArr[index]}]" alt>-->
        <div class="text">
          <div class="t_move">{{ item.folderName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ImgList",
  props: {
    groupData: {
      type: Object,
      default: {}
    },
    focArr: {
      type: Array,
      default: []
    },
    group: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style scoped lang="less">
.content-container {
  display: flex;
  flex-direction: column;
  .title {
    text-align: right;
    margin-top: 77px;
    margin-bottom: 48px;
    font-family: MicrosoftYaHei;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 0px;
    color: #a8e7ff;
  }
  .item-list {
    display: flex;
    margin-top: 25px;
    margin-left: 19px;
    flex-shrink: 0;
    flex-wrap: wrap;
    .con {
      position: relative;
      margin-left: 48px;
      margin-bottom: 48px;
      width: 312px;
      height: 468px;
      .anchor {
        position: absolute;
        top: 160px;
      }
      .bg {
        width: 312px;
        height: 413px;
        background-color: #626262;
        border-radius: 8px;
      }
      .text {
        position: absolute;
        height: 30px;
        font-size: 30px;
        line-height: 30px;
        width: 100%;
        text-align: center;
        bottom: 0;
        color: #fff;
        .t_move {
          left: 0px;
          top: 0px;
          height: 30px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .nav_foc {
    box-sizing: border-box;
    border: 2px solid #ffffff;
    border-radius: 8px;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
}
</style>
